<template>

  <div class="mx">
    <van-nav-bar
      title="作业详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft()"
    ></van-nav-bar>
    <div class="card">
      <div class="classname"><b>
        <van-icon name="description"></van-icon>
        <b class="setcname">网页制作</b></b></div>
      <div><b>
        <van-icon name="question" class="sicon"></van-icon>
      </b><font class="setcname">马巧梅 18235462547</font></div>
      <div>
        <van-icon name="clock" class="sicon"></van-icon>
        <font class="setcname">2018-2-28</font></div>
    </div>
    <div class="card">
      <div v-for="tab in blAns">
        <li>{{tab.title}}<br></li>
        <b>您的答案：</b>{{tab.answer}}<br/>
        <b>标准答案：</b>{{tab.standardAnswer}}
      </div>

      <div v-for="tab in seAns">
        <li>{{tab.title}}<br/>
          <el-radio-group v-model="tab.sectionId">
            <el-radio label="1">A.{{tab.sectionA}}</el-radio>
            <br/>
            <el-radio label="2">B.{{tab.sectionB}}</el-radio>
            <br/>
            <el-radio label="3">C.{{tab.sectionC}}</el-radio>
            <br/>
            <el-radio label="4">D.{{tab.sectionD}}</el-radio>
            <br/>
          </el-radio-group>
          <br/>
          <b>您的答案：</b>{{tab.answer}}<br/>
          <b>标准答案：</b>{{tab.standardAnswer}}
        </li>
      </div>

      <div v-for="tab in shAns">
        <li>{{tab.title}}<br></li>
        <b>您的答案：</b>{{tab.answer}}<br/>
        <b>标准答案：</b>{{tab.standardAnswer}}
      </div>
    </div>
  </div>

</template>

<script>
  import NavTabBar from "./NavTabBar";
  import "vant/lib/vant-css/icon-local.css";

  export default {
    name: "DoneMsg",
    data() {
      return {
        images: [
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg",
          "http://pic35.photophoto.cn/20150514/0005018352749416_b.jpg"
        ],
        textarea: "",
        blAns: [
          {answer: ""},
          {score: 0},
          {standardAnswer: ""},
          {title: ""}
        ],
        seAns: [
          {answer: ""},
          {score: 0},
          {standardAnswer: ""},
          {title: ""},
          {sectionA: ""},
          {sectionB: ""},
          {sectionC: ""},
          {sectionD: ""}
        ],
        shAns: [
          {answer: ""},
          {score: 0},
          {standardAnswer: ""},
          {title: ""}
        ],
        pageId: 0
      };
    },
    components: {NavTabBar},
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        this.pageId = this.$route.query.pageId;
        /**
         * 获取成绩和答案信息
         */
        this.$http.get('page/getScore', {
          params: {
            'pageId': this.pageId,
            'studentId': JSON.parse(window.localStorage.getItem("user")).id
          }
        }).then(res => {
          console.log(res)
          this.blAns = res.data.data.blank;
          this.shAns = res.data.data.ans;
          this.seAns = res.data.data.select;
          console.log(this.seAns)
        })
          .catch(err => {
            console.log(err)
          })
      },
      onClickLeft: function () {
        this.$router.push({path: '/index'})
      }
    }
  };


</script>

<style scoped>
  .card {
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 7px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-top: 5px;
    color: rgb(100, 100, 100);
  }

  .classname {
    padding: 0 0 3px 0;
    font-size: 20px;
  }

  .setcname {
    padding-left: 5px;
  }

  .sicon {
    color: rgb(22, 145, 216);
  }

  .textarea-wrapper {
    align-content: center;
    /*margin-left: 5%;*/
    /*margin-right: 5%;*/
    width: 95%;
    margin-top: 15px;
  }

  .textarea-item {
    width: 90%;
    height: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    resize: none;
    color: #aaa;
    margin-top: 5px;
    border-radius: 3px;
  }

  el-input {
    /*width: 95%;*/
    margin-right: 5%;
  }

  .answers {
    display: none;
  }

  .nonono {

  }
</style>
